<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        body{
            text-align: center;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #outer{
            width: 200px;
            margin: 50px auto;
            border: 1px solid gray;
        }
        h3{
            background-color: #eee;
            margin: 0;
            padding: 0;
            height: 40px;
            line-height: 40px;
        }
        ul{
            margin-top: 8px;
            position: relative;
            overflow: hidden;
        }
        
        .title{
            width: 180px;
            margin: -25px auto;
            position: absolute;
            left: 10px;
            color: white;
        }
        .title1{
            background-color: palevioletred;
        }
        .title2{
            background-color: darkcyan;
        }
        .title3{
            background-color: cornflowerblue;
        }
        
        .first .mask2 img{
            position: absolute;
            top: 0;
            left: -181px;
            
        }
        .first .mask2 div{
            position: absolute;
            top: 177px;
            opacity: 0;
        }
        .second .mask2 img{
            position: absolute;
            left: -181px;
            top: 155px; 
        }
        .second .mask2 div{
            position: absolute;
            top: 330px;
            opacity: 0;
        }
        .third .mask2 img{
            position: absolute;
            left: -181px;
            top: 309px;
        }
        .third .mask2{
            margin-bottom: 10px;
        }
        .third .mask2 div{
            position: absolute;
            top: 483px;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="outer">
        <h3>专辑推荐</h3>
        <ul>
            <li class="first">
                <div class="mask">
                    <img class="img1" src="../images/1_1.jpg" alt="">
                    <div class="title title1">COCOON/可可尼</div>
                </div>
                <div class="mask2">
                    <img class="img2" src="../images/1_2.jpg" alt="">
                    <div class="title title1">几何女王/极致绚烂</div>
                </div> 
            </li>
            <li class="second">
                <div class="mask">
                    <img class="img1" src="../images/2_1.jpg" alt="">
                    <div class="title title2">INSUN/时尚</div>
                </div>
                <div class="mask2">
                    <img class="img2" src="../images/2_2.jpg" alt="">
                    <div class="title title2">2013春印象</div>
                </div>
            </li>
            <li class="third">
                <div class="mask">
                    <img class="img1" src="../images/3_1.jpg" alt="">
                    <div class="title title3">JNBY/江南布衣</div>
                </div>
                <div class="mask2">
                    <img class="img2" src="../images/3_2.jpg" alt="">
                    <div class="title title3">NANMENG/南梦</div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    $('.first .mask').hover(function(){
        //li标签 鼠标进来时 触发 左边的图片 显示 标题更换 mask2显示 mask隐藏
        $('.first .mask img').stop().animate({left:-180,opacity:0},500);
        $('.first .mask div').stop().animate({top:175,opacity:0},500);
        $('.first .mask2 img').stop().animate({left:10,opacity:1},500);
        $('.first .mask2 div').stop().animate({top:155,opacity:1},500);
        
    },function(){
        //鼠标离开
        $('.first .mask img').stop().animate({left:0,opacity:1},500);
        $('.first .mask div').stop().animate({top:155,opacity:1},500);
        $('.first .mask2 img').stop().animate({left:-181,opacity:0},500);
        $('.first .mask2 div').stop().animate({top:177,opacity:0},500);
    });

    $('.second .mask').hover(function(){
        //li标签 鼠标进来时 触发 左边的图片 显示 标题更换 mask2显示 mask隐藏
        $('.second .mask img').stop().animate({left:-180,opacity:0},500);
        $('.second .mask div').stop().animate({top:328,opacity:0},500);
        $('.second .mask2 img').stop().animate({left:10,opacity:1},500);
        $('.second .mask2 div').stop().animate({top:309,opacity:1},500);
        
    },function(){
        //鼠标离开
        $('.second .mask img').stop().animate({left:0,opacity:1},500);
        $('.second .mask div').stop().animate({top:308,opacity:1},500);
        $('.second .mask2 img').stop().animate({left:-181,opacity:0},500);
        $('.second .mask2 div').stop().animate({top:328,opacity:0},500);
    });


    $('.third .mask').hover(function(){
        //li标签 鼠标进来时 触发 左边的图片 显示 标题更换 mask2显示 mask隐藏
        $('.third .mask img').stop().animate({left:-180,opacity:0},500);
        $('.third .mask div').stop().animate({top:488,opacity:0},500);
        $('.third .mask2 img').stop().animate({left:10,opacity:1},500);
        $('.third .mask2 div').stop().animate({top:467,opacity:1},500);
        
    },function(){
        //鼠标离开
        $('.third .mask img').stop().animate({left:0,opacity:1},500);
        $('.third .mask div').stop().animate({top:467,opacity:1},500);
        $('.third .mask2 img').stop().animate({left:-181,opacity:0},500);
        $('.third .mask2 div').stop().animate({top:488,opacity:0},500);
    });
    


</script>